<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>丽子美妆商品详情页</title>
    <script src="../js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="../css/details.css" />
    <link rel="stylesheet" href="../css/index.css"/>
    <link rel="stylesheet" href="../css/footer.css"/>

    <script>
        $(function(){
            $("#yinru").load("footer.html");
        });
    </script>
</head>
<body>
<!--头部-->
<div id="header_back">
    <div id="header">
        <div class="shoucang">
            <span class="iconfont span1">&#xe60e;</span>
            <a href="#">收藏丽子</a>
        </div>
        <div class="help">
            <a href="#">帮助中心</a>
        </div>
        <div class="guanzhu">
            <a class="gz" href="#">关注我们</a>
            <span class="iconfont">&#xe64d;</span>
            <div class="guanzhu-bg">
                <div class="list">
                    <a>
                        <img src="../images/gz-weibo.jpg"/>
                    </a>
                </div>
            </div>
        </div>
        <div class="tcart">
            <span class="iconfont">&#xe62d;</span>
            <a class="tc" href="#">购物车<b>0</b>件</a>
            <span class="iconfont span2">&#xe64d;</span>
        </div>
        <div class="denglu">
            <a href="#">登陆</a><span> | </span>
            <a href="#">免费注册</a>
        </div>
    </div>
</div>
<!--搜索-->
<div id="goodsSearch_back">
    <div id="goodsSearch">
        <div class="logo">
            <a href="http://localhost:63342/lizi/html/index.html?_ijt=pvuern29mpu6gn4inehnv5gncv">
                <img src="../images/logo.png"/>
            </a>
        </div>
        <div class="shop">
            <div class="shop-pic">
                <a href="#">
                    <img src="../images/moli.jpg">
                </a>
            </div>
            <div class="shop-intro">
                <p>
                    <a href="#">茉莉美妆</a>
                    <span class="iconfont">&#xe60d;</span>
                </p>
                <p>
                    <a href="#">
                        <img src="../images/kefu.png"/>
                    </a>
                </p>
            </div>
            <div class="shop-search">
                <div class="shop-search-border">
                    <input class="txt" typ="text" placeholder="请输入商品或品牌" value=""/>
                </div>
                <div class="search-btn">
                    <input type="button" value="搜全站"/>
                </div>
                <div class="search-btn">
                    <input class="ben" type="button" value="搜本店">
                </div>
            </div>
        </div>
    </div>
</div>
<!--店铺图片-->
<div class="shop-img"></div>
<!--导航-->
<div class="shop-nav">
    <div class="nav-list">
        <a href="#">首页</a>
        <a href="#">全部商品<span class="iconfont">&#xe60d;</span></a>
        <a href="#">井田</a>
        <a href="#">爱丽小屋</a>
        <a href="#">菲诗小铺</a>
        <a href="#">韩熙贞</a>
        <a href="#">得鲜</a>
        <a href="#">巧迪尚惠</a>
    </div>
</div>
<!--产品介绍-->
<div id="produceList_back">
    <div id="produceList">
        <div class="detail">
            <div class="detail-fl">
                <div class="zoom">
                    <img src="../images/zoom1.jpg"/>
                    <img src="../images/zoom2.jpg"/>
                    <img src="../images/zoom3.jpg"/>
                    <div class="zoom-tool"></div>
                </div>
                <div class="zoom-list">
                    <ul>
                        <li>
                            <span class="iconfont arrow">&#xe662;</span>
                            <img src="../images/zoomx1.jpg"/>
                        </li>
                        <li>
                            <span class="iconfont arrow">&#xe662;</span>
                            <img src="../images/zoomx2.jpg"/>
                        </li>
                        <li>
                            <span class="iconfont arrow">&#xe662;</span>
                            <img src="../images/zoomx3.jpg"/>
                        </li>
                    </ul>
                </div>
                <div class="zoomd">
                    <img src="../images/zoom1.jpg"/>
                    <img src="../images/zoom2.jpg"/>
                    <img src="../images/zoom3.jpg"/>
                </div>
            </div>
            <div class="detail-cen">
                <dl>
                    <dt>
                        <h2>巧迪尚惠浓翘随心控睫毛膏</h2>
                        <p>
                            买就送睫毛夹！！！独特凹面毛刷，精确将睫毛膏覆盖到每根睫毛上，
                            紧密包裹住整根睫毛，令睫毛更纤长、浓密、卷翘撩人 ，
                            天然的滋养素对睫毛的保护体贴入微，防水不易脱落十分容易卸妆
                        </p>
                    </dt>
                    <dd>
                        <p class="p1">
                            丽子价
                            <span class="pL">￥</span>
                            <span class="price">67.00</span>
                            <a href="#">登录查看会员折扣价</a>
                        </p>
                        <p class="p2">
                            销&nbsp;&nbsp;&nbsp;量
                            <span>最近售出<b>&nbsp;3&nbsp;</b>件</span>
                        </p>
                        <p class="p3">
                            评&nbsp;&nbsp;&nbsp;价
                            <i></i>
                            <span>5分</span>
                            (已有两人评价)
                        </p>
                        <p class="p4">
                            规&nbsp;&nbsp;&nbsp;格
                            <a href="#">
                                10g
                                <span class="iconfont">&#xe655;</span>
                            </a>
                        </p>
                        <div class="p5">
                           <div class="n"> 数&nbsp;&nbsp;&nbsp;量</div>
                            <div class="num">
                                <span class="iconfont jian">&#xe633;</span>
                                <input type="text" value="1"/>
                                <span class="iconfont jia">&#xe632;</span>
                             </div>
                            件&nbsp;&nbsp;&nbsp;(库存9995件)
                        </div>
                        <p class="p6">
                            <a href="#">
                                <span class="iconfont">&#xe636;</span>
                                加入购物车
                            </a>
                        </p>
                    </dd>
                </dl>
                <ul>
                    <li>
                        <span class="iconfont">&#xe60c;</span>
                        100%正品
                    </li>
                    <li>
                        <span class="iconfont">&#xe638;</span>
                        48小时发货
                    </li>
                    <li>
                        <span class="iconfont">&#xe631;</span>
                        30天无理由退货
                    </li>
                </ul>
                <div class="promise"></div>
            </div>
            <div class="detail-rg">
                <h3>
                    看了又看
                    <span class="iconfont">&#xe602;</span>
                </h3>
                <div class="bd">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="../images/gc1.jpg"/>
                                <p>21.99</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../images/gc2.jpg"/>
                                <p>68.00</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../images/gc3.jpg"/>
                                <p>40.00</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--详情介绍-->
<div class="detail-page">
    <div class="detail-main">
        <div class="produ-fl">
            <div class="tabs-bar">
                <ul>
                    <li><a href="#">商品详情</a></li>
                    <li><a href="#">评价详情(2)</a></li>
                </ul>
            </div>
        </div>
        <div class="produ-rg"></div>
    </div>
</div>
</body>
</html>